<template>
	<view>
		<image class="mainIamge" mode="aspectFill" :src="info.image"></image>
		<view>
			<view class="shopName" v-text="info.shopName"></view>
			<view class="flexView">
				<view class="score" v-text="'评分:'+(!info.hasOwnProperty('score')?0:info.score).toFixed(1)"></view>
				<view class="totCnt" v-text="'月销:'+info.totCnt"></view>
			</view>
			<!-- 折叠页 -->
			<van-action-sheet :show="showInfo" title="详情" @click-overlay="showInfo=false" @close="showInfo=false" lock-scroll>
				<van-cell-group>
					<view v-for="(item,index) in list" :key="item.dishName">
						<van-cell v-if="item.value>0" :title="item.dishName" :value="'¥'+(((item.price*item.discount).toFixed(2))*item.value).toFixed(2)" :label="'×'+item.value" />
					</view>
				</van-cell-group>
				<view class="safeView"></view>
			</van-action-sheet>
			<van-submit-bar v-if="tabsIndex==0" z-index=100 :price="totPrice*100" :button-text="(totPrice<info.reach)?('满'+info.reach+'元起送'):('就这些了')" @submit="onSubmit" :loading="submiting" :disabled="totPrice<info.reach||info.status==0" safe-area-inset-bottom>
				<label class="label" @click="onClickInfo">点击查看详情</label>
			</van-submit-bar>
			<van-tabs color="#11b24e" sticky :z-index="10" :active="tabsIndex" @change="onChangeTabs">
				<van-tab title="菜品">
					<!-- 菜单 -->
					<view v-for="(item,index) in list" :key="item.dishName">
						<van-card v-if="item.discount<1.0" :origin-price="item.price.toFixed(2)" :price="(item.price*item.discount).toFixed(2)" :desc="'月售'+item.cnt" :title="item.dishName" :thumb="item.image">
						  <template #footer>
						    <van-stepper style="position: relative; top: -60rpx;" :value="item.value" disable-input @minus="onChangeStepper(-1,index,item.value)" @plus="onChangeStepper(1,index,item.value)" integer min="0" max="8" button-size="50rpx" />
						  </template>
						</van-card>
						<van-card v-else :price="item.price.toFixed(2)" :desc="'月售'+item.cnt" :title="item.dishName" :thumb="item.image">
						  <template #footer>
						    <van-stepper style="position: relative; top: -60rpx;" :value="item.value" disable-input @minus="onChangeStepper(-1,index,item.value)" @plus="onChangeStepper(1,index,item.value)" integer min="0" max="8" button-size="50rpx" />
						  </template>
						</van-card>
					</view>
				</van-tab>
				<van-tab title="评价">
					<view style="padding: 0rpx 25rpx;">
						<view v-for="(item,index) in review" :key="index" style="margin-bottom: 20rpx;">
							<view style="display: flex;align-items: center;">
								<view class="nickName" v-text="item.nickName"></view>
								<van-rate :value="item.score" readonly />
							</view>
							<view class="reviewText" v-text="item.text"></view>
							<image class="reviewImage" v-for="(iitem,iindex) in review[index].image" :key="iindex" :src="iitem" mode="aspectFit" />
							<van-divider />
						</view>
					</view>
				</van-tab>
				<van-tab title="商家">
					<van-cell title="自取地点" :value="info.address" />
					<van-cell title="电话" :value="info.tel" @click="onClickTel">
						<template #right-icon>
							<van-icon name="phone-o" />
						</template>
					</van-cell>
				</van-tab>
			</van-tabs>
		</view>
		<view class="safeView"></view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				tabsIndex:0,
				shopId:'',
				info:{},
				//菜单
				totPrice:0,
				list:[],
				showInfo:false,
				submiting:false,
				//评论
				review:[]
			}
		},
		onLoad(param){
			const that=this;
			if(that.info.status==0){
				uni.showToast({
					title:'店家已休息',
					icon:'none',
					duration:1200
				});
			}
			that.shopId=param.shopId;
			wx.showLoading();
			wx.request({
				url:that.myConfig.apiUrl+'/getShopInfo.php',
				data:{
					shopId:that.shopId
				},
				success:function(res){
					wx.hideLoading();
					console.log('getShopInfo',res);
					that.info=res.data.info;
					that.list=res.data.list;
					that.review=res.data.review;
				},
				fail:function(){
					wx.hideLoading();
					that.myConfig.err();
				}
			});
		},
		methods:{
			//订单详情
			onClickInfo(){
				const that=this;
				that.showInfo=!that.showInfo;
			},
			//提交订单
			onSubmit(){
				const that=this;
				that.submiting=true;
				that.myConfig.tmpInfo=that.myConfig.cloneObj(that.info);
				that.myConfig.tmpList=that.myConfig.cloneObj(that.list).filter(function(item){
					return item.value;
				});
				that.submiting=false;
				wx.navigateTo({
					url: '/pages/submit/submit?shopId='+that.shopId
				});
			},
			//改变数量
			onChangeStepper(flag,index,value){
				const that=this;
				that.list[index].value=value+flag;
				that.totPrice+=flag*(that.list[index].price*that.list[index].discount).toFixed(2);
			},
			//点击电话
			onClickTel(){
				const that=this;
				wx.makePhoneCall({
					phoneNumber:that.info.tel+''
				});
			},
			//切换tabs
			onChangeTabs(value){
				const that=this;
				that.tabsIndex=value.detail.index;
			}
		}
	}
</script>

<style scoped>
	.mainIamge{
		width: 100%;
		height: 300rpx;
	}
	.flexView{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.shopName{
		font-size: 40rpx;
		font-weight: 800;
		text-align: center;
	}
	.score{
		color: #F0AD4E;
		margin-right: 10rpx;
	}
	.totCnt{
		font-size: 25rpx;
	}
	.label{
		font-size: 30rpx;
		color: #11b24e;
	}
	.nickName{
		font-weight: 600;
		color: #969799;
	}
	.reviewText{
		font-size: 28rpx;
		color: #969799;
	}
	.reviewImage{
		margin: 3rpx;
		width: 220rpx;
		height: 220rpx;
	}
</style>
